<template>
  <div class="hello">
    <h1>{{ msg }}{{score}}</h1>
     <input class="score" type="text" @keyup.enter="onEnter" v-model="score" />
    <button @click="add">+</button>
    <button @click="reduce">-</button>
   
    <div ></div>

    <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model：<input type="text" v-model="message"></p>
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p><!-- lazy相当于change -->
        <p>v-model.number：<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多选按钮绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>
        <hr>
        <h3>多选绑定一个数组</h3>
        <p>
            <input type="checkbox" id="JS" value="JS" v-model="web_Names">
            <label for="JS">JS</label><br />
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="Panda">Panda</label><br />
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="PanPan">PanPan</label>
            <p>{{web_Names}}</p>
        </p>
        <hr>
        <h3>单选按钮绑定</h3>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="two">女</label>
        <p>你选择了 {{sex}}</p>
  </div>
  
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      score: 0,
      msg: '得分:',
      message: "hello Vue!!!!",
      isTrue: true,
      web_Names: [],
      sex:"男"
    }
  },
  methods:{ //methods内使用this时，不能用箭头函数
    add:function(){
      console.log(this)
       this.score ++;
    },
    reduce(){
      if(this.score > 1){
        this.score --;
      }
    },
    onEnter:function(){
      this.score ++;
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.score{
  width: 1rem;
  padding-left: 0.5rem;
  line-height: 0.5rem;
  height: 1rem;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
